<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <input type="button" value="新增" id="add"><br>
        <hr>
        <table border="1" cellspacing="0" id="brandTable">

        </table>
        <script src="js/axios-0.18.0.js"></script>
        <script>
            //1 当页面完全被加载时执行该事件
            window.onload = function () {
                //2 页面加载完成后发送Ajax请求
                axios({
                    method:"get",
                    url:"http://localhost:8080/AxiosJsonDemoo/selectAllServlet"
                }).then(function (resp) {
                    //3 获取数据
                    let brands = resp.data;
                    //4 设置表头
                    let tableData = "<tr>\n" +
                        "                <th>序号</th>\n" +
                        "                <th>品牌名称</th>\n" +
                        "                <th>企业名称</th>\n" +
                        "                <th>排序</th>\n" +
                        "                <th>品牌介绍</th>\n" +
                        "                <th>状态</th>\n" +
                        "                <th>操作</th>\n" +
                        "            </tr>";
                    for (let i = 0; i < brands.length; i++) {
                        //5 获取数组中的JSON字符串数据
                        //前端会自动将JSON字符串数据转为Java对象
                        let brand = brands[i];
                        tableData += "<tr align=\"center\">\n" +
                            "            <td>" + (i + 1) + "</td>\n" +
                            "            <td>" + brand.brandName + "</td>\n" +
                            "            <td>" + brand.companyName + "</td>\n" +
                            "            <td>" + brand.ordered + "</td>\n" +
                            "            <td>" + brand.description + "</td>\n" +
                            "            <td>" + (brand.status == 1 ? "启用" : "禁用") + "</td>\n" +
                            "<td><a href=\"/AxiosJsonDemoo/selectByIdServlet?id=" + brand.id + "\">修改</a> <a href=\"/AxiosJsonDemoo/deleteServlet?id=" + brand.id + "\">删除</a></td>" +
                            "        </tr>"
                    }
                    //6 设置表格数据
                    document.getElementById("brandTable").innerHTML = tableData;
                })
            }
            document.getElementById("add").onclick = function () {
                //addBrand.jsp的路径
                location.href = "/AxiosJsonDemoo/addBrand.html";
            }
        </script>
    </body>
</html>